<!--
 * @Author: wangyingjie
 * @Date: 2021-08-16 19:01:01
 * @Email: wyj@hyrctec.com
 * @LastEditors: dailuyu
 * @LastEditTime: 2021-08-27 11:24:56
 * @Company: hyrc
 * @FilePath: \TaskErrorManage\src\components\dashboard\XiangMu.vue
 * @Description: 
-->
<template>
  <div class="XiangMu.Class">
    <div id="div3" style="width: 85%; float: right">
      <el-button @click="handleClick6()" type="text" size="small"
        >新增</el-button
      >
      <el-table
        @row-click="XiangMuDate"
        :data="tableData2"
        border
        lazy:load="load"
      >
        <el-table-column prop="Id" label="项目ID" width="50"> </el-table-column>
        <el-table-column prop="Follow" label="跟踪"></el-table-column>
        <el-table-column prop="State" label="状态"></el-table-column>
        <el-table-column prop="Priority" label="优先级"></el-table-column>
        <el-table-column prop="Subject" label="主题"></el-table-column>
        <el-table-column prop="Subject" label="指派给"></el-table-column>
        <el-table-column prop="CreateUserID" label="创建者"></el-table-column>
        <el-table-column prop="CreateDate" label="创建于"></el-table-column>
        <el-table-column prop="UpdateDate" label="更新时间"></el-table-column>
        <el-table-column prop="BugCounts" label="BUG出现次数"></el-table-column>
        <el-table-column prop="BadLevel" label="严重级别"></el-table-column>
        <el-table-column
          prop="BreakDownRate"
          label="重现机率"
        ></el-table-column>
        <el-table-column prop="StartTime" label="开始时间"></el-table-column>
        <el-table-column prop="EndTime" label="计划完成时间"></el-table-column>
        <el-table-column prop="OverProssece" label="完成进度"></el-table-column>
        <el-table-column
          prop="IsPublish"
          label="是否影响发布"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button
              @click="handleClick12(scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="div2" style="width: 15%; float: left">
      <el-button type="text" size="small"></el-button>
      <el-table
        :data="tableData1"
        row-key="Id"
        border
        lazy:load="load"
        @row-click="openDetails"
      >
        <el-table-column prop="Name" label="项目名"> </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog
        v-model:visible="dialogVisible"
        width="500"
        @close="close"
        @open="open"
      >
        <el-input
          type="textarea"
          autosize
          placeholder="请输入内容"
          v-model="textarea1"
        >
        </el-input>
        <el-button @click="dialogVisible1()">保存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-dialog>
    </div>
    <el-dialog
      title=""
      custom-class="demo-drawer"
      v-model="drawer3"
      direction="rtl"
      ref="deawer1"
      width="300px"
      height="200px"
    >
      <div width="300px" height="200px">
        <el-form :model="form3" width="200px">
          <el-form-item label="请输入项目名:" label-width="form3">
            <el-input
              v-model="form3.dataname"
              autocomplete="off"
              :disabled="false"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="createData11()" type="text">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="新增问题"
      custom-class="demo-drawer"
      v-model="drawer1"
      direction="rtl"
      ref="deawer1"
      width="700px"
      height="600px"
    >
      <el-container>
        <div width="800px" height="500px">
          <el-col width="400px">
            <div class="demo5">
              <el-form :model="form1" width="300px">
                <el-form-item label="跟踪:" label-width="form">
                  <el-input
                    v-model="form1.Follow"
                    autocomplete="off"
                    :disabled="false"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态:" label-width="form">
                  <el-select v-model="form1.state" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.state"
                      :label="item.label"
                      :value="item.state"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="优先级:" label-width="form">
                  <el-select v-model="form1.Priority" placeholder="请选择">
                    <el-option
                      v-for="item in options1"
                      :key="item.Priority"
                      :label="item.label"
                      :value="item.Priority"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="主题:" label-width="form">
                  <el-input
                    v-model="form1.Subject"
                    autocomplete="off"
                    :disabled="false"
                  ></el-input>
                </el-form-item>
                <el-form-item label="指派给ID:" label-width="form">
                  <el-input
                    v-model="form1.AssigneUserID"
                    autocomplete="off"
                    :disabled="false"
                  ></el-input>
                </el-form-item>
                <el-form-item label="创建于:" label-width="form">
                  <el-input
                    v-model="form1.CreateDate"
                    autocomplete="off"
                    :disabled="false"
                  ></el-input>
                </el-form-item>
              </el-form>

              <el-button @click="createData9()" type="text">保存</el-button>
              <el-button @click="drawer1 = false" type="text">取消</el-button>
            </div>
          </el-col>
          <el-col width="400px">
            <div class="demo6">
              <el-form :model="form1" width="300px">
                <el-form-item label=" Bug出现次数:" label-width="form">
                  <el-input
                    v-model="form1.BugCounts"
                    autocomplete="off"
                    :disabled="false"
                  ></el-input>
                </el-form-item>
                <el-form-item label=" 严重级别:" label-width="form">
                  <el-select v-model="form1.BadLevel" placeholder="请选择">
                    <el-option
                      v-for="item in options2"
                      :key="item.BadLevel"
                      :label="item.label"
                      :value="item.BadLevel"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label=" 重现几率:" label-width="form">
                  <el-select v-model="form1.BreakDownRate" placeholder="请选择">
                    <el-option
                      v-for="item in options3"
                      :key="item.BreakDownRate"
                      :label="item.label"
                      :value="item.BreakDownRate"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label=" 开始时间:" label-width="form">
                  <el-date-picker
                    v-model="form1.StartTime"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label=" 计划完成时间:" label-width="form">
                  <el-date-picker
                    v-model="form1.EndTime"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label=" 完成进度:" label-width="form">
                  <el-input
                    v-model="form1.OverProssece"
                    autocomplete="off"
                    :disabled="false"
                  ></el-input>
                </el-form-item>
                <el-form-item label=" 是否影响发布版本:" label-width="form">
                  <el-input
                    v-model="form1.IsPublish"
                    autocomplete="off"
                    :disabled="false"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </div>
      </el-container>
    </el-dialog>
    <!-- 问题详情弹框 -->
    <el-dialog
      title="问题详情"
      custom-class="demo-drawer"
      v-model="drawer"
      direction="rtl"
      ref="deawer"
      width="1400px"
      height="1300px"
    >
      <el-container>
        <div width="1600px" height="800px">
          <el-col width="400px">
            <div class="demo">
              <el-form :model="form" width="280px">
                <el-form-item label="问题Id:" label-width="form">
                  <el-input
                    v-model="form.ProblemId"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态:" label-width="form">
                  <el-select v-model="form.state" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.state"
                      :label="item.label"
                      :value="item.state"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="优先级:" label-width="form">
                  <el-select v-model="form.Priority" placeholder="请选择">
                    <el-option
                      v-for="item in options1"
                      :key="item.Priority"
                      :label="item.label"
                      :value="item.Priority"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="严重等级:" label-width="form">
                  <el-select v-model="form.BadLevel" placeholder="请选择">
                    <el-option
                      v-for="item in options2"
                      :key="item.BadLevel"
                      :label="item.label"
                      :value="item.BadLevel"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="重现几率:" label-width="form">
                  <el-select v-model="form.BreakDownRate" placeholder="请选择">
                    <el-option
                      v-for="item in options3"
                      :key="item.BreakDownRate"
                      :label="item.label"
                      :value="item.BreakDownRate"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="BUG处理次数:" label-width="form">
                  <el-input
                    v-model="form.BugCounts"
                    autocomplete="off"
                    :disabled="false"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="dialog-footer">
              <el-button type="text">上传</el-button>
              <el-button type="text">修改</el-button>
              <el-button @click="createData7()" type="text">确定</el-button>
              <el-button @click="drawer1 = false" type="text">取消</el-button>
            </div>
          </el-col>
          <el-col width="400px">
            <div class="demo2">
              <el-form :model="form" width="280px">
                <el-form-item label="开始时间:" label-width="form">
                  <el-input
                    v-model="form.StartTime"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item label="计划完成日期:" label-width="form">
                  <el-input
                    v-model="form.EndTime"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item label="完成(%):" label-width="form">
                  <el-input
                    v-model="form.OverProssece"
                    autocomplete="off"
                    :disabled="false"
                  ></el-input>
                </el-form-item>
                <el-form-item label="是否影响发布:" label-width="form">
                  <el-input
                    v-model="form.IsPublish"
                    autocomplete="off"
                    :disabled="false"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col width="600px">
            <div class="demo1">
              <el-form :model="form">
                <el-form-item label="描述内容:" label-width="form">
                  <el-input
                    width="600px"
                    type="textarea"
                    autosize
                    placeholder="请输入内容"
                    v-model="form.Content"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>

          <el-col width="400px">
            <div class="demo4">
              <el-form :model="form" width="300px">
                <el-form-item label="历史记录:" label-width="form">
                  <el-input
                    type="textarea"
                    autosize
                    placeholder=""
                    v-model="form.Content"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </div>
      </el-container>
    </el-dialog>
  </div>
</template>
<script>
import {
  GetProject,
  GetManageinfo,
  GetRemarkinfo,
  AddRemarkinfo,
} from "@/api/HomeProject"
import { ref } from "vue"
export default {
  data() {
    return {
      state: "",
      options: [
        {
          state: "1",
          label: "新建",
        },
        {
          state: "2",
          label: "已发补丁",
        },
        {
          state: "3",
          label: "反馈",
        },
        {
          state: "4",
          label: "进行中",
        },
        {
          state: "5",
          label: "待测试",
        },
        {
          state: "6",
          label: "完成",
        },
        {
          state: "7",
          label: "打开",
        },
      ],
      Priority: "",
      options1: [
        {
          Priority: "1",
          label: "普通",
        },
        {
          Priority: "2",
          label: "高",
        },
        {
          Priority: "3",
          label: "紧急",
        },
        {
          Priority: "4",
          label: "立刻",
        },
      ],
      BadLevel: "",
      options2: [
        {
          BadLevel: "1",
          label: "低",
        },
        {
          BadLevel: "2",
          label: "中",
        },
        {
          BadLevel: "3",
          label: "高",
        },
      ],
      BreakDownRate: "",
      options3: [
        {
          BreakDownRate: "1",
          label: "偶然",
        },
        {
          BreakDownRate: "2",
          label: "频繁",
        },
      ],
      ChangeRemark: ref(""),
      table: false,
      loading: false,
      drawer: false,
      drawer1: false,
      drawer3: false,
      form3: {
        dataname: "",
      },
      form: {
        ProblemId: "",
        Content: "",
        UserId: "",
        CreateDate: "",
        FilePath: "",
        UpdateDate: "",
        ChangeRemark: "",
      },
      form1: {
        Id: "",
        ProjectId: "",
        Follow: "",
        State: "",
        Priority: "",
        Subject: "",
        AssigneUserID: "",
        CreateUserID: "",
        CreateDate: "",
        UpdateDate: "",
        BugCounts: "",
        BadLevel: "",
        BreakDownRate: "",
        StartTime: "",
        EndTime: "",
        OverProssece: "",
        IsPublish: "",
      },
      textarea: "",
      label: "",
      assigneUserID: "",
      tableData1: [{}],
      data1: [],
      tableData2: [],
      //tableData1: [],
      data2: [],
      tableData3: [],
      data3: [],
    }
  },
  created() {
    var obj = this
    GetManageinfo().then((response) => {
      for (var i = 0; i < response.data.data.length; i++) {
        var _data = {
          FId: "",
          Id: "",
          Name: "",
          children: [],
        }
        _data.FId = response.data.data[i].FId
        _data.Id = response.data.data[i].Id
        _data.Name = response.data.data[i].Name

        if (_data.FId == 0) {
          obj.tableData1.push(_data)
        }
      }
      for (var n = 0; n < response.data.data.length; n++) {
        for (var p = 0; p < obj.tableData1.length; p++) {
          if (
            obj.tableData1[p].Id == response.data.data[n].FId &&
            response.data.data[n].FId != 0
          ) {
            obj.tableData1[p].children.push(response.data.data[n])
          }
        }
      }
    })
  },
  methods: {
    //删除按钮
    handleClick12: function (row, index) {
      this.form13 = Object.assign({}, row)
      debugger
      AddRemarkinfo(this.form13.ProjectId).then((response) => {
        this.tableData2 = []
        GetProject(this.form13.Id).then((response) => {
          for (var i = 0; i < response.data.data.length; i++) {
            this.tableData2.push(response.data.data[i])
          }
        })
      })
    },
    //新增数据保存按钮
    createData9() {
      this.drawer3 = true
    },
    //用于生成uuid
    S4() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
    },
    guid() {
      return (
        this.S4() +
        this.S4() +
        "-" +
        this.S4() +
        "-" +
        this.S4() +
        "-" +
        this.S4() +
        "-" +
        this.S4() +
        this.S4() +
        this.S4()
      )
    },
    createData11() {
      for (var y = 0; y < this.tableData1.length; y++) {
        if (this.form3.dataname == this.tableData1[y].Name) {
          this.form1.ProblemId = this.tableData1[y].Id
        }
      }
      this.form1.Id = this.guid()
      AddRemarkinfo(this.form1).then((response) => {
        if (response.length > 0) {
          this.drawer1 = false
          this.drawer3 = false
        }
      })
    },
    //新增按钮
    handleClick6() {
      debugger
      this.drawer1 = true
    },
    createData7() {
      this.$confirm("确定提交修改？")
        .then((_) => {
          this.drawer = false
        })
        .catch((_) => {
          this.drawer = false
        })
    },
    //问题详情点击事件
    XiangMuDate(row) {
      this.drawer = true
      this.form6 = Object.assign({}, row)
      GetRemarkinfo(this.form6.Id).then((response) => {
        for (var i = 0; i < response.data.data.length; i++) {
          this.form.ProblemId = response.data.data[i].ProblemId
          this.form.Content = response.data.data[i].Content
          this.form.UserId = response.data.data[i].UserId
          this.form.CreateDate = this.getdate() // 时间
          this.form.FilePath = response.data.data[i].FilePath
          this.form.UpdateDate = this.getdate() // 时间
          this.form.ChangeRemark = response.data.data[i].ChangeRemark
        }
      })
    },
    //项目下拉点击事件
    openDetails(row) {
      this.form = Object.assign({}, row)
      this.tableData2 = []
      GetProject(this.form.Id).then((response) => {
        debugger
        for (var i = 0; i < response.data.data.length; i++) {
          this.tableData2.push(response.data.data[i])
        }
      })
    },
    //详情按钮
    handleClick1: function (row, index) {
      this.tableData3 = []
    },
    //主题按钮
    handleClick2: function (row, index) {
      this.form3 = Object.assign({}, row)
    },
    getdate() {
      // 时间生成
      var now = new Date()
      var y = now.getFullYear()
      var m = now.getMonth() + 1
      var d = now.getDate()
      if (m > 9) {
        if (d > 9) {
          return y + "-" + m + "-" + d
        } else {
          return y + "-" + m + "-" + "0" + d
        }
      } else if (m < 9) {
        if (d < 9) {
          return y + "-" + "0" + m + "-" + "0" + d
        } else {
          return y + "-" + "0" + m + "-" + d
        }
      }
    },
  },
}
</script>
<style>
.XiangMu.Class {
  width: 1600px;
}
</style>
